<template>
  <view style="padding: 10px;">
    
    <view class="list-item">
      <view class="item1">
      	<text>消耗</text>
      	<text>可用：600RMB</text>
      </view>
	  <view class="item2">
	  	<text>RMB</text>
	  	<view class="vertical-middle">
	  	  <input type="text" v-model="amount" placeholder="0.1-600" />
	  	</view>
	  </view>
	  <button class="button-cz">最大</button>
      
    </view>
	<view class="list-item">
	  <view class="item1">
	  	<text>获得</text>
	  </view>
		<view class="item2">
			<text>虚拟币</text>
			<view class="vertical-middle">
			  <input type="text" v-model="amount" placeholder="0.01-1000" />
			</view>
		</view>
		
	</view>
	<view class="list-item-text">
		1虚拟币≈12.23RMB
	</view>
	<view class="action-btn-group">
		<button type="primary" class=" action-btn no-border buy-now-btn " @click="">兑换</button>
	</view>

    

  </view>
</template>

<script>
import { mapState } from 'vuex';


export default {
  data() {
    return {
      authentication: true,
      userInfo: null
    };
  },
  computed: {
    ...mapState(['hasLogin', 'userInfo'])
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      
    },
   
  },
  computed: {
    
  }
};
</script>



<style lang="scss">



.list-item {
	    margin: 10px 0;
	font-size: 30rpx;
 
  align-items: center;
  justify-content: space-between;
  padding: 10upx;
  color: #fff;
  background-color: #2f3045;
  border-radius: 4px;
  input{
	  color: #6e6f7e;
  }
}
.button-cz {
		    background: transparent;
		    color: #fff;
		    height: 55rpx;
		    width: 130rpx;
		    line-height: 55rpx;
		    border-radius: 25rpx;
		    font-size: 28rpx;
		    border: 1px solid;
			margin-right: 10px;

		}
.item1{
	    display: flex;
	    justify-content: space-between;
	    color: #9393af;
	    font-size: 14px;
	    margin: 5px 10px;
}
.item2{
	display: flex;
	    justify-content: space-between;
	   
	    font-size: 16px;
	    margin: 10px 10px;
}
.action-btn-group{
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			background: linear-gradient(to right, #2493f1, #14d1cc);
			margin-top: 20px;
			position:relative;
			
			.action-btn{
				display:flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				height: 100%;
				font-size: $font-base ;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
		.list-item-text{
			color: #9393af;
			    font-size: 14px;
			    text-align: center;
		}
		.vertical-middle{
			text-align: right;
		}


</style>
